import { ScrollView, View, Text, ITouchEvent } from "@tarojs/components"
import "./index.scss"
import "../../images/public/style.css";

export {
    LgList,
    LgListItem,
    IconAttr,
    NoIconAttr
}


interface LgListProps {
    type: "A" | "B"
    className?: string
    children?: React.ReactNode
}

function LgList(props: LgListProps) {

    //生成className
    const classNames = new Array<string>();
    classNames.push("lg-list-common")
    classNames.push("style-" + props.type)
    if (props.className) {
        classNames.push(props.className)
    }
    const className = classNames.join(" ")

    return (
        <View className={className}>
            <ScrollView className="lg-list-scrollview" scrollY={true}>
                <View className="lg-list-scrollview-wapper">
                    {
                        props.children
                    }
                </View>
            </ScrollView>
        </View>
    )
}


interface LgListItemProps {
    title: string
    onClick?: (event: ITouchEvent) => void
    iconAttrs?: Array<IconAttrProps>
    children?: React.ReactNode
    leftNode: React.ReactNode
    contentNode: React.ReactNode
}


function LgListItem(props: LgListItemProps) {
    const onClick = (event: ITouchEvent) => {
        if (props.onClick) {
            props.onClick(event)
        }
    }

    return (
        <View onClick={onClick} className="lg-list-item">
            <View className="lg-list-item-left">
                {props.leftNode}
            </View>
            <View className="lg-list-item-right">
                <Text className="lg-list-item-title">{props.title}</Text>
                {props.contentNode}
                <View className="lg-list-item-right-bottom-line"></View>
            </View>
            {
                props.children
            }
        </View>
    )
}


interface NoIconAttrProp {
    text: string
}

function NoIconAttr(props: NoIconAttrProp) {
    return (
        <View className="attr-wrapper">
            <Text className="attr-text">{props.text}</Text>
        </View>
    )
}


interface IconAttrProps {
    text: string
    icon: string
    className?: string
}

function IconAttr(props: IconAttrProps) {
    return (
        <View className={ props.className? "lg-list-icon-attr " + props.className: "lg-list-icon-attr"}>
            <Text className={"text-icon " + props.icon}></Text>
            <Text className="lg-list-icon-attr-text" >{props.text}</Text>
        </View>
    )
}